<template>
  <el-dialog :model-value="visible" :title="title" width="500" :close-on-click-modal="false" :show-close="false">
    <el-form ref="formRef" :model="form" :rules="formRules" label-width="auto">
      <el-form-item label="菜单分组" prop="group">
        <el-input v-model="form.group"></el-input>
      </el-form-item>
      <el-form-item label="菜单名称" prop="menu">
        <el-input v-model="form.menu"></el-input>
      </el-form-item>
      <el-form-item label="菜单编码" prop="menuCode">
        <el-input v-model="form.menuCode"></el-input>
      </el-form-item>
      <el-form-item label="排序值" prop="orderBy">
        <el-input-number :min="0" :step="1" v-model.number="form.orderBy"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="emits('close', false)">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import ApiTree from '@/server/api-tree';
import type { MenuVO } from '@/server/menu/types';
import { type FormRules, type FormInstance, ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';

const emits = defineEmits(["close"])
withDefaults(defineProps<{ visible: boolean }>(), {
  visible: false
});
/** 表单定义 */
const title = ref<string>("添加菜单");
const form = ref<MenuVO>({
  group: "",
  menu: "",
  menuCode: "",
  orderBy: 0
});
const formRef = ref<FormInstance>();
const formRules = reactive<FormRules<MenuVO>>({
  group: [{ required: true, message: "菜单分组不能为空" }],
  menu: [{ required: true, message: "菜单名称不能为空" }],
  menuCode: [{ required: true, message: "菜单编码不能为空" }],
  orderBy: [{ required: true, message: "排序值不能小于0" }]
})
/**提交表单 */
const submit = () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      const { success, msg } = await ApiTree.menu.create(form.value);
      if (success) {
        ElMessage.success(msg);
      }
      emits("close", success);
    }
  })
}
</script>
<style lang="scss" scope></style>
